@extends("admin.layout.main")

@section("content")
<div id="app" style="width: 100%">
    {{-- 删除modal --}}
    <Modal v-model="delModal" width="360">
        <p slot="header" style="color:#f70;text-align:center">
            <span>删除确认</span>
        </p>
        <div style="text-align:center">

            <p>确定要删除吗?</p>
        </div>
        <div slot="footer">
            <i-button type="error" size="large" long  @click="del">删除</i-button>
        </div>
    </Modal>
   {{-- 管理员modal--}}
    <Modal v-model="adminModal" width="360">
        <p slot="header" style="color:#f70;text-align:center">
            <span>管理员弹框</span>
        </p>
        <div style="text-align:center">
            <p class="x-margin-10"><label>账号 : </label> <i-input v-model="username" style="width:220px"></i-input></p>
            <p class="x-margin-10"><label>密码 : </label> <i-input v-model="password" style="width:220px" type="password"></i-input></p>
            <p class="x-margin-10"><label>名称 : </label> <i-input v-model="name" style="width:220px" ></i-input></p>

            <div class="x-margin-10">
                <div><label>绑定角色 : </label></div>

                <div style="text-align: center;border:1px solid #e9e9e9;padding: 6px">
                    <div style="border-bottom:1px solid #e9e9e9;">
                        <Checkbox
                                v-model="checkAll" @on-change="checkAllBox">全选
                        </Checkbox>
                    </div>
                    <Checkbox-Group v-model="role_ids"  style="padding-top: 10px">

                        <Checkbox :label="item.id" v-for="item of origin_roles"><span>@{{ item.name }}</span></Checkbox>
                    </Checkbox-Group>
                </div>
            </div>

        </div>
        <div slot="footer">
            <i-button type="primary" size="large" long  @click="submit">保存</i-button>
        </div>
    </Modal>

    {{--主体代码--}}
    <Row type="flex" justify="center" align="middle">
        <Spin size="large" fix v-if="spinShow"></Spin>
        <i-col span="23" >
            <span>
                 <i-button type="primary" @click="adminModalUp()">添加管理员</i-button>
            </span>
            <span>
                 <i-button type="error" @click="delModalUp()">批量删除</i-button>
            </span>
        </i-col>

    </Row>
    <Row  justify="center" align="middle" >
        <i-col  style="margin-top: 20px;width: 100%">
            <i-table  ref="selection" :data="tableData" :columns="tableColumns" >
            </i-table>
        </i-col>
    </Row>

    <Row type="flex" justify="center" class="code-row-bg">
        <i-col>
            <Page
                    size="small"
                    :total="page.total"
                    :current="page.current"
                    :page-size="page.pageSize"
                    show-total
                    show-elevator
                    @on-change="accountList">

            </Page>
        </i-col>
    </Row>



</div>
<script src="/js/vue.js"></script>
<script  src="/js/iview.js"></script>
<script  src="/js/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                delModal:false,
                adminModal:false,
                token:'',
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'id',

                    },
                    {
                        title: '账号',
                        key: 'username',

                    },
                    {
                        title: '名字',
                        key: 'name',

                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            let row = params.row;
                            return h('div', [
                                h('i-button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            roles = [];
                                            if(row.roles.length > 0){
                                                for(let i in row.roles){
                                                    roles.push(row.roles[i].id);
                                                }
                                            }
                                            this.adminModalUp(row.username,row.name,row.id,roles)
                                        }

                                    }

                                }, "编辑"),
                                h('i-button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': ()=>{
                                            this.delModalUp(row.id);
                                        }
                                    }

                                }, "删除"),


                            ]);
                        }
                    }
                ],
                page: {
                    total: 0,
                    current: 1,
                    pageSize: 20,
                },
                spinShow:false,
                tableData: [],
                username:'',
                password:'',
                name:'',
                id:'',
                batch_ids:[],
                role_ids:[],
                origin_roles:[],
                checkAll:false,

            }
        },
        mounted(){
            this.token = window.localStorage.getItem('current_user');
            this.$Message.config({
                top: 90,
                duration: 3
            });
        },
        methods:{
            adminModalUp(username = '',name = '',id = '',roles = []){
                this.role_ids = roles;
                this.username = username;
                this.name = name;
                this.id = id;
                this.password = '';
                this.adminModal = true;
            },
            delModalUp(id = ''){
                batch_ids = [];
                if(id){
                    batch_ids = [id];
                }else{
                    batch_ids = this.batch();
                    if(batch_ids.length == 0){
                        this.$Message.info('请先勾选');
                        return false;
                    }

                }
                this.batch_ids = batch_ids;
                this.delModal = true;
            },
            batch() {
                let ids = [];
                this.$refs.selection.getSelection().map(item => {
                    ids.push(item.id);
                });
                return ids;
            },
            accountList(page){
                axios.get('/admin/users/list', {
                    params: {
                        token:vm.token,
                        page: page,
                    }
                }).then((response) => {
                    vm.tableData = response.data.result.data;
                    vm.page.total = response.data.result.total;
                    vm.page.current = response.data.result.current_page;
                    vm.page.pageSize = response.data.result.per_page;
                })
            },
            roleList(){
                that = this;
                console.log(111)
                axios.get('/admin/role/list', {
                    params: {
                        token:vm.token,
                        page: 1,
                    }
                }).then((response) => {
                    data = response.data;
                    if(data.code == 200){
                        that.origin_roles = [...data.result.data];
                    }
                })
            },
            submit(){
                that = this;

                axios.post('/admin/users/store',
                    {
                        id:that.id,
                        username:that.username,
                        password:that.password,
                        name:that.name,
                        role_ids:that.role_ids,
                        token:that.token,
                    }
                ).then(response => {

                    if(response.data.code == 200){
                        that.adminModal = false;
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.accountList(1);
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            },
            del(){
                that = this;

                axios.post('/admin/users/del',
                    {
                        ids:that.batch_ids,
                        token:that.token,
                    }
                ).then(response => {
                    that.delModal = false;
                    if(response.data.code == 200){
                        that.$Message.success('操作成功');
                        setTimeout(function () {
                            that.accountList(1);
                        },500);
                    }else{
                        that.$Message.error(response.data.msg);
                    }
                }).catch(e => {
                    that.$Message.error('服务器异常');
                });
            },
            //全选按钮
            checkAllBox(){
                if(this.checkAll == true){
                    if(this.origin_roles.length > 0){
                        this.role_ids = [];
                        for(var i in this.origin_roles){
                            this.role_ids.push( this.origin_roles[i].id);
                        }
                    }
                }else{
                    this.role_ids = [];
                }
            },

        },
        watch:{
            role_ids(){
                if(this.origin_roles.length == this.role_ids.length && this.origin_roles.length > 0){
                    this.checkAll = true;
                }else{
                    this.checkAll = false;
                }
            }
        }
    })

    vm.accountList();
    vm.roleList();
</script>

@endsection

